<template>
    <div class="home-view">
        <!-- 轮播图 -->
        <div class="carousel-wrapper">
            <el-carousel height="380px" :interval="5000" arrow="always" class="home-carousel">
                <el-carousel-item v-for="item in carouselItems" :key="item.id">
                    <div class="carousel-item">
                        <img :src="item.imageUrl" alt="Carousel Image" class="carousel-image">
                        <div class="carousel-overlay">
                            <h2 class="carousel-title">{{ item.title }}</h2>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="main-layout">
            <div class="main-content">
                <!-- 推荐作者 -->
                <section class="recommend-authors">
                    <div class="section-header">
                        <h2 class="section-title">
                            推荐讲师
                        </h2>
                        <div class="header-actions">
                            <el-button type="default" size="small" round @click="changeTeachers">
                                换一换
                            </el-button>
                        </div>
                    </div>
                    <div class="author-grid">
                        <div class="author-card" v-for="user in displayedTeachers" :key="user.userId">
                            <el-avatar :size="60" :src="user.avatar" class="author-avatar"></el-avatar>
                            <div class="author-info">
                                <span class="author-name">{{ user.nickName }}</span>
                                <span class="author-desc">{{ getShortResume(user.resume) }}</span>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 课程精选 -->
                <section class="featured-courses">
                    <div class="section-header">
                        <h2 class="section-title">
                            课程精选
                        </h2>
                        <div class="header-actions">
                            <el-button type="default" size="small" round @click="changeCourses" :loading="loading">
                                换一换
                            </el-button>
                            <el-link type="info" :underline="false" @click="goToCourseHome">更多 ></el-link>
                        </div>
                    </div>
                    <div class="course-grid">
                        <CourseCard v-for="course in featuredCourses" class="courseCard" :key="course.courseId"
                            :courseId="course.courseId" detailsUrl="/course/courseDetails" :boxWidth="270"
                            @deleteEvent="handleDeleteCourse" @editEvent="handleEditCourse"
                            @collectEvent="handleCollectCourse" />
                    </div>
                </section>

                <!-- 题库精选 -->
                <section class="featured-questions">
                    <div class="section-header">
                        <h2 class="section-title">
                            题库精选
                        </h2>
                        <div class="header-actions">
                            <el-button type="default" size="small" round @click="changeExercises"
                                :loading="exercisesLoading">
                                换一换
                            </el-button>
                            <el-link type="info" :underline="false" @click="goToQuestionBankHome">更多 ></el-link>
                        </div>
                    </div>

                    <div class="question-list-header">
                        <div class="question-tab-options">
                            <div class="question-tab-option" :class="{ 'selected': exercisesType === 'course' }"
                                @click="switchExercisesType('course')">
                                课程题库
                            </div>
                            <div class="question-tab-option" :class="{ 'selected': exercisesType === 'competition' }"
                                @click="switchExercisesType('competition')">
                                竞赛题库
                            </div>
                        </div>
                    </div>

                    <div class="question-list-content">
                        <div class="question-list-table">
                            <!-- 表头 -->
                            <div class="table-header">
                                <div class="table-column id-column">编号</div>
                                <div class="table-column title-column">题目</div>
                                <div class="table-column type-column">类型</div>
                                <div class="table-column difficulty-column">难度</div>
                                <div class="table-column accuracy-column">正确率</div>
                                <div class="table-column challenge-column">挑战人数</div>
                                <div class="table-column action-column"></div>
                            </div>

                            <!-- 表格行 -->
                            <div class="table-row" v-for="exercise in featuredExercises" :key="exercise.exercisesId">
                                <div class="table-column id-column">{{ exercise.exercisesId }}</div>
                                <div class="table-column title-column">
                                    <div class="exercise-title">{{ exercise.title }}</div>
                                    <div class="exercise-course" v-if="exercise.courseInfo">
                                        <span class="course-label">关联课程</span>
                                        <span class="course-name">{{ exercise.courseInfo.courseName }}</span>
                                    </div>
                                    <div class="exercise-course" v-else>
                                        <span class="competition-tag">竞赛题</span>
                                    </div>
                                </div>
                                <div class="table-column type-column">
                                    <span class="exercise-type question-type">{{ exercise.exerciseType }}</span>
                                </div>
                                <div class="table-column difficulty-column">
                                    <div class="difficulty-tag" :class="getDifficultyClass(exercise.difficulty)">
                                        {{ getDifficultyText(exercise.difficulty) }}
                                    </div>
                                </div>
                                <div class="table-column accuracy-column">
                                    {{ exercise.accuracy ? exercise.accuracy : 0 }}%
                                </div>
                                <div class="table-column challenge-column">
                                    {{ exercise.challengeNum }}
                                </div>
                                <div class="table-column action-column">
                                    <div class="action-button" @click="startExerciseChallenge(exercise.exercisesId)">
                                        {{ exercisesType === 'course' ? '开始做题' : '开始挑战' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 侧边栏内容容器 -->
            <div class="sidebar-container">
                <!-- 欢迎卡片 -->
                <div class="welcome-card-container">
                    <div class="welcome-card">
                        <div class="welcome-card-content">
                            <h2 class="welcome-title">欢迎来到智创题库</h2>
                            <p class="welcome-text">海量高质量课程与题库，助力你的技术能力提升</p>
                            <p class="welcome-stats">
                                <span class="stat-item"><i class="el-icon-collection"></i> 10,000+ 题目</span>
                                <span class="stat-item"><i class="el-icon-user"></i> 3,000+ 用户</span>
                                <span class="stat-item"><i class="el-icon-time"></i> 每日更新</span>
                            </p>
                        </div>
                        <div class="welcome-decoration">
                            <div class="welcome-circle welcome-circle-1"></div>
                            <div class="welcome-circle welcome-circle-2"></div>
                            <div class="welcome-circle welcome-circle-3"></div>
                        </div>
                    </div>
                </div>

                <!-- 热门题库 -->
                <div class="sidebar-section">
                    <h3 class="sidebar-title">热门题库</h3>
                    <div class="sidebar-content">
                        <div v-for="(exercise, index) in hotExercises" :key="'hot-' + index" class="sidebar-item">
                            <div class="exercise-info">
                                <div class="exercise-title">{{ exercise.title }}</div>
                                <div class="exercise-meta">
                                    <span class="exercise-type" :style="getExercisesBgStyle(exercise.exerciseType)">
                                        {{ exercise.exerciseType }}
                                    </span>
                                    <span class="exercise-difficulty">{{ exercise.difficulty }}</span>
                                    <span class="exercise-accuracy">正确率: {{ exercise.accuracy }}</span>
                                </div>
                                <div class="exercise-author">
                                    <i class="el-icon-user"></i>
                                    <span>挑战人数: {{ exercise.challengeNum }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最新题目 -->
                <div class="sidebar-section">
                    <h3 class="sidebar-title">最新题库</h3>
                    <div class="sidebar-content">
                        <div v-for="(exercise, index) in recentExercises" :key="'recent-' + index" class="sidebar-item">
                            <div class="exercise-info">
                                <div class="exercise-title">{{ exercise.title }}</div>
                                <div class="exercise-meta">
                                    <span class="exercise-type" :style="getExercisesBgStyle(exercise.exerciseType)">
                                        {{ exercise.exerciseType }}
                                    </span>
                                    <span class="exercise-difficulty">{{ exercise.difficulty }}</span>
                                    <span class="exercise-accuracy">正确率: {{ exercise.accuracy }}</span>
                                </div>
                                <div class="exercise-author">
                                    <i class="el-icon-time"></i>
                                    <span>更新: {{ formatDate(exercise.updateDate) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消息对话框 -->
        <MessageDialog ref="messageDialog"></MessageDialog>
    </div>
</template>

<script>
// 修改为选项式 API，避免 reactive 导入问题
import CourseCard from '@/components/course/CourseCard.vue';
import MessageDialog from '@/components/MessageDialog.vue';
import { courseApi } from '@/api/course/Course';
import { QuestionBankApi } from '@/api/QuestionBank/QuestionBank';

export default {
    name: 'HomeView',
    components: {
        CourseCard,
        MessageDialog
    },
    data () {
        return {
            baseUrl: '', // 提供baseUrl变量，如果实际环境需要可以设置具体的前缀
            // 轮播图数据
            carouselItems: [
                {
                    id: 1,
                    imageUrl: 'https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_1280.jpg',
                    title: '编程学习从这里开始'
                },
                {
                    id: 2,
                    imageUrl: 'https://cdn.pixabay.com/photo/2016/11/30/20/58/programming-1873854_1280.png',
                    title: '海量题库等你挑战'
                },
                {
                    id: 3,
                    imageUrl: 'https://cdn.pixabay.com/photo/2017/07/31/11/31/laptop-2557468_1280.jpg',
                    title: '每日更新 提升技能'
                },
                {
                    id: 4,
                    imageUrl: 'https://cdn.pixabay.com/photo/2016/11/19/22/52/coding-1841550_1280.jpg',
                    title: '专业导师 实时答疑'
                },
            ],

            // 推荐用户数据
            recommendedUsers: [
                {
                    userId: 1,
                    nickName: '王教授',
                    resume: '资深Java开发工程师，10年教学经验',
                    avatar: 'https://tse3-mm.cn.bing.net/th/id/OIF-C.pXL9RtWsjtw5ZdJfrPsZEg?rs=1&pid=ImgDetMain',
                    phoneNumber: '13800138001',
                    userEmail: 'wang@example.com',
                    regTime: '2022-05-15',
                    updateTime: '2023-11-20'
                },
                {
                    userId: 2,
                    nickName: '李讲师',
                    resume: '算法专家，ACM金牌得主，专注数据结构教学',
                    avatar: 'https://a.520gexing.com/uploads/allimg/2021051008/thseyxc3vkz.jpg',
                    phoneNumber: '13800138002',
                    userEmail: 'li@example.com',
                    regTime: '2022-07-22',
                    updateTime: '2023-12-10'
                },
                {
                    userId: 3,
                    nickName: '张工程师',
                    resume: '全栈开发专家，精通前端框架与后端架构',
                    avatar: 'https://www.keaitupian.cn/cjpic/frombd/0/253/3680147856/2045951790.jpg',
                    phoneNumber: '13800138003',
                    userEmail: 'zhang@example.com',
                    regTime: '2021-11-05',
                    updateTime: '2023-10-15'
                },
                {
                    userId: 4,
                    nickName: '刘老师',
                    resume: 'Python爱好者，数据分析与机器学习专家',
                    avatar: 'https://p26-sign.toutiaoimg.com/tos-cn-i-6w9my0ksvp/9fdf765cda1a4c35abfd0cd4c40a266e~tplv-tt-shrink-asy2-web:640:0:5aS05p2hQOWjgee6uOe-juWbvuWIhuS6qw==:gif.jpeg?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1746518764&x-signature=CJ4wiZpRJqF6hoNAWvoacOBphQo%3D',
                    phoneNumber: '13800138004',
                    userEmail: 'liu@example.com',
                    regTime: '2022-03-18',
                    updateTime: '2023-09-28'
                },
                {
                    userId: 5,
                    nickName: '陈教授',
                    resume: '网络安全专家，曾任多家互联网企业安全顾问',
                    avatar: 'https://pic.nximg.cn/file/20210404/31571673_170455750104_2.jpg',
                    phoneNumber: '13800138005',
                    userEmail: 'chen@example.com',
                    regTime: '2021-08-12',
                    updateTime: '2023-11-05'
                },
                {
                    userId: 6,
                    nickName: '黄博士',
                    resume: '人工智能研究员，专注深度学习与神经网络',
                    avatar: 'https://cdn.pixabay.com/photo/2016/03/31/20/11/avatar-1295575_1280.png',
                    phoneNumber: '13800138006',
                    userEmail: 'huang@example.com',
                    regTime: '2022-01-20',
                    updateTime: '2023-10-30'
                },
                {
                    userId: 7,
                    nickName: '赵老师',
                    resume: 'C++资深开发者，游戏引擎与图形学专家',
                    avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.KRdugk6mTAdyvn5jVn4pngHaHT?rs=1&pid=ImgDetMain',
                    phoneNumber: '13800138007',
                    userEmail: 'zhao@example.com',
                    regTime: '2022-02-15',
                    updateTime: '2023-10-25'
                },
                {
                    userId: 8,
                    nickName: '林教授',
                    resume: '区块链技术专家，智能合约开发讲师',
                    avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.gYtm6fxdp7BgZemcEKTlOAAAAA?rs=1&pid=ImgDetMain',
                    phoneNumber: '13800138008',
                    userEmail: 'lin@example.com',
                    regTime: '2021-09-10',
                    updateTime: '2023-11-15'
                },
                {
                    userId: 9,
                    nickName: '钱工程师',
                    resume: '移动开发专家，iOS与Android跨平台解决方案',
                    avatar: 'https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_1280.png',
                    phoneNumber: '13800138009',
                    userEmail: 'qian@example.com',
                    regTime: '2022-04-05',
                    updateTime: '2023-09-20'
                },
                {
                    userId: 10,
                    nickName: '孙讲师',
                    resume: '云计算架构师，容器化技术与微服务专家',
                    avatar: 'https://res1-cn.c.hihonor.com/data/attachment/forum/202505/02/18194837b38498bf7b0b90.jpg',
                    phoneNumber: '13800138010',
                    userEmail: 'sun@example.com',
                    regTime: '2021-10-18',
                    updateTime: '2023-12-01'
                },
                {
                    userId: 11,
                    nickName: '吴教授',
                    resume: '大数据处理与分析专家，Hadoop和Spark技术讲师',
                    avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.im1JJg3iH-Erm4dhInHGkwHaHa?rs=1&pid=ImgDetMain',
                    phoneNumber: '13800138011',
                    userEmail: 'wu@example.com',
                    regTime: '2022-01-08',
                    updateTime: '2023-11-28'
                },
                {
                    userId: 12,
                    nickName: '郑博士',
                    resume: '编译原理研究者，编程语言设计专家',
                    avatar: 'https://pic1.zhimg.com/v2-dcda957b71759ebad5d2afaf3579bfb2_r.jpg',
                    phoneNumber: '13800138012',
                    userEmail: 'zheng@example.com',
                    regTime: '2021-12-15',
                    updateTime: '2023-10-10'
                }
            ],
            displayedTeachers: [], // 当前显示的讲师数据
            teacherCount: 5, // 每次显示的讲师数量

            // 课程数据相关
            allCourses: [], // 存储所有课程数据
            coursesHistory: [], // 存储已经显示过的课程数据
            featuredCourses: [], // 当前显示的课程数据
            coursePageSize: 8, // 每页显示的课程数量
            currentCourseIndex: 0, // 当前展示的课程起始索引
            loading: false, // 加载状态

            // 题库精选数据相关
            allExercises: [], // 存储所有题目数据
            courseExercises: [], // 课程题库缓存
            competitionExercises: [], // 竞赛题库缓存
            exercisesHistory: [], // 存储已显示过的题目
            featuredExercises: [], // 当前显示的题目数据
            exercisesPageSize: 10, // 每页显示的题目数量
            currentExercisesIndex: 0, // 当前展示的题目起始索引
            exercisesLoading: false, // 题库加载状态
            exercisesType: 'course', // 题库类型: course 或 competition

            // 热门题库完整数据
            allHotExercises: [
                {
                    exercisesId: 1001,
                    title: 'JavaScript基础语法练习',
                    exerciseType: '选择题',
                    difficulty: 1,
                    accuracy: 85,
                    challengeNum: 1249,
                    dataType: 'course'
                },
                {
                    exercisesId: 1006,
                    title: 'HTML和CSS基础应用',
                    exerciseType: '实战题',
                    difficulty: 1,
                    accuracy: 91,
                    challengeNum: 1546,
                    dataType: 'course'
                },
                {
                    exercisesId: 1003,
                    title: 'Python数据结构应用',
                    exerciseType: '编程题',
                    difficulty: 2,
                    accuracy: 72,
                    challengeNum: 932,
                    dataType: 'course'
                },
                {
                    exercisesId: 1007,
                    title: '网络协议分析',
                    exerciseType: '选择题',
                    difficulty: 2,
                    accuracy: 76,
                    challengeNum: 895,
                    dataType: 'course'
                },
                {
                    exercisesId: 1004,
                    title: '前端框架原理分析',
                    exerciseType: '论述题',
                    difficulty: 3,
                    accuracy: 59,
                    challengeNum: 567,
                    dataType: 'course'
                },
                {
                    exercisesId: 1002,
                    title: 'SQL查询优化题',
                    exerciseType: '简答题',
                    difficulty: 2,
                    accuracy: 68,
                    challengeNum: 864,
                    dataType: 'course'
                },
                {
                    exercisesId: 1020,
                    title: 'Vue组件通信实践',
                    exerciseType: '实战题',
                    difficulty: 2,
                    accuracy: 78,
                    challengeNum: 726,
                    dataType: 'course'
                },
                {
                    exercisesId: 1021,
                    title: 'React Hooks使用技巧',
                    exerciseType: '编程题',
                    difficulty: 3,
                    accuracy: 65,
                    challengeNum: 812,
                    dataType: 'course'
                },
                {
                    exercisesId: 1022,
                    title: 'Express中间件开发',
                    exerciseType: '实战题',
                    difficulty: 2,
                    accuracy: 71,
                    challengeNum: 689,
                    dataType: 'course'
                },
                {
                    exercisesId: 1023,
                    title: '数据库索引优化案例',
                    exerciseType: '分析题',
                    difficulty: 3,
                    accuracy: 62,
                    challengeNum: 574,
                    dataType: 'course'
                },
                {
                    exercisesId: 1024,
                    title: 'Docker容器化部署',
                    exerciseType: '操作题',
                    difficulty: 2,
                    accuracy: 79,
                    challengeNum: 735,
                    dataType: 'course'
                },
                {
                    exercisesId: 1025,
                    title: '微服务架构设计',
                    exerciseType: '设计题',
                    difficulty: 3,
                    accuracy: 58,
                    challengeNum: 423,
                    dataType: 'course'
                }
            ],

            // 最新题库完整数据
            allRecentExercises: [
                {
                    exercisesId: 1008,
                    title: '数据库设计实践',
                    exerciseType: '设计题',
                    difficulty: 3,
                    accuracy: 54,
                    challengeNum: 512,
                    dataType: 'course'
                },
                {
                    exercisesId: 1005,
                    title: '算法效率分析',
                    exerciseType: '分析题',
                    difficulty: 3,
                    accuracy: 62,
                    challengeNum: 723,
                    dataType: 'course'
                },
                {
                    exercisesId: 1003,
                    title: 'Python数据结构应用',
                    exerciseType: '编程题',
                    difficulty: 2,
                    accuracy: 72,
                    challengeNum: 932,
                    dataType: 'course'
                },
                {
                    exercisesId: 1009,
                    title: 'Linux系统基础命令',
                    exerciseType: '填空题',
                    difficulty: 1,
                    accuracy: 88,
                    challengeNum: 678,
                    dataType: 'course'
                },
                {
                    exercisesId: 1010,
                    title: 'Git版本控制实践',
                    exerciseType: '操作题',
                    difficulty: 2,
                    accuracy: 75,
                    challengeNum: 546,
                    dataType: 'course'
                },
                {
                    exercisesId: 1011,
                    title: 'React组件设计模式',
                    exerciseType: '实战题',
                    difficulty: 3,
                    accuracy: 65,
                    challengeNum: 489,
                    dataType: 'course'
                },
                {
                    exercisesId: 1030,
                    title: 'TypeScript类型系统详解',
                    exerciseType: '选择题',
                    difficulty: 2,
                    accuracy: 75,
                    challengeNum: 612,
                    dataType: 'course'
                },
                {
                    exercisesId: 1031,
                    title: 'CI/CD流水线配置',
                    exerciseType: '操作题',
                    difficulty: 2,
                    accuracy: 67,
                    challengeNum: 498,
                    dataType: 'course'
                },
                {
                    exercisesId: 1032,
                    title: 'GraphQL接口设计',
                    exerciseType: '编程题',
                    difficulty: 3,
                    accuracy: 59,
                    challengeNum: 473,
                    dataType: 'course'
                },
                {
                    exercisesId: 1033,
                    title: 'Flutter跨平台开发',
                    exerciseType: '实战题',
                    difficulty: 3,
                    accuracy: 62,
                    challengeNum: 527,
                    dataType: 'course'
                },
                {
                    exercisesId: 1034,
                    title: 'NoSQL数据库应用',
                    exerciseType: '简答题',
                    difficulty: 2,
                    accuracy: 72,
                    challengeNum: 583,
                    dataType: 'course'
                },
                {
                    exercisesId: 1035,
                    title: '后端性能优化案例',
                    exerciseType: '分析题',
                    difficulty: 3,
                    accuracy: 57,
                    challengeNum: 456,
                    dataType: 'course'
                }
            ],

            // 显示的热门题库和最新题库数据（动态生成）
            hotExercises: [],
            recentExercises: [],
            lastRefreshDate: '', // 上次刷新日期
        };
    },
    methods: {
        // 加载热门课程数据
        async loadHotCourses () {
            try {
                this.loading = true;
                // 调用API获取热门课程
                const courses = await courseApi.findHotCourse();
                // 转换数据格式以匹配CourseCard组件需要的数据结构
                this.allCourses = courses.map(course => this.transformCourseData(course));
                // 初始显示第一页数据
                this.displayCourses();
            } catch (error) {
                console.error('加载热门课程失败', error);
            } finally {
                this.loading = false;
            }
        },

        // 换一批课程
        changeCourses () {
            this.loading = true;

            // 更新下一页的起始索引
            const oldStartIndex = this.currentCourseIndex;
            this.currentCourseIndex += this.coursePageSize;

            // 如果已经循环完所有课程数据
            if (this.currentCourseIndex >= this.allCourses.length) {
                // 重置索引，开始随机抽取
                this.currentCourseIndex = 0;
                // 所有数据都已经显示过，放入历史记录
                if (this.coursesHistory.length < this.allCourses.length) {
                    // 添加最后一批数据到历史记录
                    for (let i = oldStartIndex; i < this.allCourses.length; i++) {
                        if (!this.coursesHistory.some(item => item.courseId === this.allCourses[i].courseId)) {
                            this.coursesHistory.push(this.allCourses[i]);
                        }
                    }
                }
                // 随机抽取历史数据
                this.randomPickCourses();
            } else {
                // 添加当前页数据到历史记录
                for (let i = oldStartIndex; i < oldStartIndex + this.coursePageSize && i < this.allCourses.length; i++) {
                    if (!this.coursesHistory.some(item => item.courseId === this.allCourses[i].courseId)) {
                        this.coursesHistory.push(this.allCourses[i]);
                    }
                }
                // 显示下一页数据
                this.displayCourses();
            }
            this.loading = false;
        },

        // 显示当前页的课程
        displayCourses () {
            const endIndex = Math.min(this.currentCourseIndex + this.coursePageSize, this.allCourses.length);
            this.featuredCourses = this.allCourses.slice(this.currentCourseIndex, endIndex);
        },

        // 随机从历史记录中抽取课程
        randomPickCourses () {
            if (this.coursesHistory.length <= this.coursePageSize) {
                // 如果历史数据不足一页，直接全部显示
                this.featuredCourses = [...this.coursesHistory];
            } else {
                // 随机抽取8门课程
                const selectedCourses = [];
                const historyClone = [...this.coursesHistory];

                for (let i = 0; i < this.coursePageSize && historyClone.length > 0; i++) {
                    // 随机选择一个索引
                    const randomIndex = Math.floor(Math.random() * historyClone.length);
                    // 添加选中的课程
                    selectedCourses.push(historyClone[randomIndex]);
                    // 从备选数组中移除，避免重复选择
                    historyClone.splice(randomIndex, 1);
                }

                this.featuredCourses = selectedCourses;
            }
        },

        // CourseCard事件处理
        handleDeleteCourse (courseId) {
            console.log('删除课程', courseId);
            // 实际项目中需要调用API进行删除操作
        },
        handleEditCourse (courseId) {
            console.log('编辑课程', courseId);
            // 实际项目中需要跳转到编辑页面或打开编辑对话框
        },
        handleCollectCourse (courseId) {
            console.log('收藏课程', courseId);
            // 实际项目中需要调用API进行收藏操作
        },

        // 路由导航
        goToCourseHome () {
            this.$router.push({ name: 'courseHome' });
        },
        goToQuestionBankHome () {
            this.$router.push({ name: 'questionBankHome' });
        },

        // 将课程数据转换为CourseCard需要的格式
        transformCourseData (course) {
            return {
                courseId: course.courseId,
                courseInfo: {
                    courseName: course.courseName,
                    courseDescription: course.courseDescription || '',
                    coverPath: course.coverPath || ''
                },
                courseTeacher: {
                    teacher: {
                        nickName: typeof course.createBy === 'string' ? course.createBy : '未知讲师'
                    }
                },
                courseFigures: {
                    studentCount: 0, // API返回的数据中没有这个字段，暂时设为0
                    commentCount: 0, // API返回的数据中没有这个字段，暂时设为0
                    updateTime: course.createDate || '未知时间'
                },
                collect: course.collect || false
            };
        },

        getDifficultyClass (difficulty) {
            switch (difficulty) {
                case 1: return 'difficulty-easy';
                case 2: return 'difficulty-medium';
                case 3: return 'difficulty-hard';
                default: return 'difficulty-medium';
            }
        },
        getDifficultyText (difficulty) {
            switch (difficulty) {
                case 1: return '简单';
                case 2: return '中等';
                case 3: return '困难';
                default: return '中等';
            }
        },
        getPreviewText (questionStem) {
            if (!questionStem) return '';
            // 移除HTML标签，只保留文本
            const textOnly = questionStem.replace(/<[^>]*>?/gm, '');
            return textOnly.length > 60 ? textOnly.substring(0, 60) + '...' : textOnly;
        },
        formatDate (dateString) {
            // 输入格式为 'YYYY-MM-DD'
            if (!dateString) return '';

            // 解析日期字符串为日期对象
            const date = new Date(dateString);
            // 获取当前日期（只保留年月日，不含时分秒）
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());

            // 将输入日期也转换为不含时分秒的日期（当天0点）
            const targetDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            // 计算相差的毫秒数
            const diffMs = today.getTime() - targetDate.getTime();
            // 转换为天数差（向下取整）
            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

            // 根据天数差显示不同的文本
            if (diffDays === 0) return '今天';
            if (diffDays === 1) return '昨天';
            if (diffDays > 1 && diffDays < 7) return `${diffDays}天前`;

            // 超过7天显示具体日期
            const month = date.getMonth() + 1;
            const day = date.getDate();
            return `${month}月${day}日`;
        },
        getShortResume (resume) {
            if (!resume) return '';
            return resume.length > 20 ? resume.substring(0, 20) + '...' : resume;
        },
        getDifficultyTagType (difficulty) {
            switch (difficulty) {
                case 1: return 'success';
                case 2: return 'warning';
                case 3: return 'danger';
                default: return 'info';
            }
        },
        getExercisesBgStyle (type) {
            let color;
            switch (type) {
                case '选择题': color = '#409EFF'; break;
                case '填空题': color = '#67C23A'; break;
                case '编程题': color = '#E6A23C'; break;
                case '设计题': color = '#F56C6C'; break;
                case '论述题': color = '#909399'; break;
                case '分析题': color = '#9B59B6'; break;
                case '实战题': color = '#20A0FF'; break;
                case '操作题': color = '#FF9900'; break;
                default: color = '#409EFF';
            }
            return {
                backgroundColor: color,
                color: 'white'
            };
        },

        // 题库精选切换类型
        switchExercisesType (type) {
            if (this.exercisesType !== type) {
                this.exercisesLoading = true;
                this.exercisesType = type;

                // 如果已有缓存数据则直接使用
                if (type === 'course' && this.courseExercises.length > 0) {
                    this.allExercises = this.courseExercises;
                    this.exercisesHistory = [];
                    this.currentExercisesIndex = 0;
                    this.displayExercises();
                    this.exercisesLoading = false;
                } else if (type === 'competition' && this.competitionExercises.length > 0) {
                    this.allExercises = this.competitionExercises;
                    this.exercisesHistory = [];
                    this.currentExercisesIndex = 0;
                    this.displayExercises();
                    this.exercisesLoading = false;
                } else {
                    // 没有缓存，需要从API加载
                    this.allExercises = [];
                    this.exercisesHistory = [];
                    this.currentExercisesIndex = 0;
                    this.loadExercises();
                }
            }
        },

        // 加载题库数据
        async loadExercises () {
            try {
                this.exercisesLoading = true;

                // 构造请求参数
                const params = {
                    type: this.exercisesType,
                    currentPage: 1,
                    pageSize: 30, // 减少一次性获取的数据量以加快响应速度
                    sort: {
                        sortName: 'exercises_id',
                        sortType: 'ASC'
                    }
                };

                // 调用API获取题库数据
                const result = await QuestionBankApi.getQuestionBankList(params);

                if (result.code === 200) {
                    this.allExercises = result.data.list;

                    // 根据类型缓存结果
                    if (this.exercisesType === 'course') {
                        this.courseExercises = [...this.allExercises];
                    } else if (this.exercisesType === 'competition') {
                        this.competitionExercises = [...this.allExercises];
                    }

                    this.displayExercises();
                } else {
                    console.error('加载题库数据失败', result.message);
                }
            } catch (error) {
                console.error('加载题库数据失败', error);
            } finally {
                this.exercisesLoading = false;
            }
        },

        // 换一批题库
        changeExercises () {
            this.exercisesLoading = true;

            // 更新下一页的起始索引
            const oldStartIndex = this.currentExercisesIndex;
            this.currentExercisesIndex += this.exercisesPageSize;

            // 如果已经循环完所有题目数据
            if (this.currentExercisesIndex >= this.allExercises.length) {
                // 重置索引，开始随机抽取
                this.currentExercisesIndex = 0;

                // 所有数据都已经显示过，放入历史记录
                if (this.exercisesHistory.length < this.allExercises.length) {
                    // 添加最后一批数据到历史记录
                    for (let i = oldStartIndex; i < this.allExercises.length; i++) {
                        if (!this.exercisesHistory.some(item => item.exercisesId === this.allExercises[i].exercisesId)) {
                            this.exercisesHistory.push(this.allExercises[i]);
                        }
                    }
                }

                // 随机抽取历史数据
                this.randomPickExercises();
            } else {
                // 添加当前页数据到历史记录
                for (let i = oldStartIndex; i < oldStartIndex + this.exercisesPageSize && i < this.allExercises.length; i++) {
                    if (!this.exercisesHistory.some(item => item.exercisesId === this.allExercises[i].exercisesId)) {
                        this.exercisesHistory.push(this.allExercises[i]);
                    }
                }

                // 显示下一页数据
                this.displayExercises();
            }

            this.exercisesLoading = false;
        },

        // 显示当前页的题目
        displayExercises () {
            const endIndex = Math.min(this.currentExercisesIndex + this.exercisesPageSize, this.allExercises.length);
            this.featuredExercises = this.allExercises.slice(this.currentExercisesIndex, endIndex);
        },

        // 随机从历史记录中抽取题目
        randomPickExercises () {
            if (this.exercisesHistory.length <= this.exercisesPageSize) {
                // 如果历史数据不足一页，直接全部显示
                this.featuredExercises = [...this.exercisesHistory];
            } else {
                // 随机抽取题目
                const selectedExercises = [];
                const historyClone = [...this.exercisesHistory];

                for (let i = 0; i < this.exercisesPageSize && historyClone.length > 0; i++) {
                    // 随机选择一个索引
                    const randomIndex = Math.floor(Math.random() * historyClone.length);
                    // 添加选中的题目
                    selectedExercises.push(historyClone[randomIndex]);
                    // 从备选数组中移除，避免重复选择
                    historyClone.splice(randomIndex, 1);
                }

                this.featuredExercises = selectedExercises;
            }
        },

        // 开始挑战或做题
        startExerciseChallenge (exercisesId) {
            const routeName = this.exercisesType === 'course' ? 'questionBankRandomQuiz' : 'questionBankDetails';
            this.$router.push({
                name: routeName,
                params: { topicId: exercisesId }
            });
        },

        // 初始化侧边栏题库数据（每天刷新一次）
        initSidebarExercises () {
            // 获取当前日期字符串(如：2024-06-24)
            const today = new Date().toISOString().split('T')[0];

            // 从localStorage获取上次刷新日期
            const savedDate = localStorage.getItem('sidebar_refresh_date');
            const savedHotData = localStorage.getItem('sidebar_hot_exercises');
            const savedRecentData = localStorage.getItem('sidebar_recent_exercises');

            // 如果今天已经生成过数据，直接使用
            if (savedDate === today && savedHotData && savedRecentData) {
                this.hotExercises = JSON.parse(savedHotData);
                this.recentExercises = JSON.parse(savedRecentData);
                this.lastRefreshDate = savedDate;
            } else {
                // 否则重新生成数据
                this.refreshSidebarExercises();

                // 保存到localStorage
                localStorage.setItem('sidebar_refresh_date', today);
                localStorage.setItem('sidebar_hot_exercises', JSON.stringify(this.hotExercises));
                localStorage.setItem('sidebar_recent_exercises', JSON.stringify(this.recentExercises));
                this.lastRefreshDate = today;
            }
        },

        // 刷新侧边栏题库数据
        refreshSidebarExercises () {
            // 复制数组，避免修改原始数据
            const hotPool = [...this.allHotExercises];
            const recentPool = [...this.allRecentExercises];

            // 随机打乱数组
            this.shuffleArray(hotPool);
            this.shuffleArray(recentPool);

            // 从打乱后的数组中选择前5个作为展示
            this.hotExercises = hotPool.slice(0, 5).map(item => {
                // 添加动态的挑战人数（原数据上下浮动10%）
                const variation = Math.floor(item.challengeNum * 0.1 * (Math.random() * 2 - 1));
                return {
                    ...item,
                    challengeNum: Math.max(1, item.challengeNum + variation),
                    accuracy: Math.min(100, Math.max(1, item.accuracy + Math.floor(Math.random() * 10) - 5)),
                    // 不设置更新时间，让它在模板中使用当前时间
                };
            });

            // 生成今天的日期字符串
            const now = new Date();
            const today = now.toISOString().split('T')[0];

            // 生成近几天的随机日期（1-5天内）
            this.recentExercises = recentPool.slice(0, 5).map((item, index) => {
                // 创建日期对象用于显示
                let date = new Date();
                let updateDateStr = today;

                // 前两个设为今天，其余设为1-5天前的日期
                if (index >= 2) {
                    // 随机生成1-5的天数
                    const daysAgo = Math.floor(Math.random() * 5) + 1;
                    // 创建对应日期
                    date = new Date(date.getTime() - daysAgo * 24 * 60 * 60 * 1000);
                    updateDateStr = date.toISOString().split('T')[0];
                }

                return {
                    ...item,
                    // 设置更新日期字符串
                    updateDate: updateDateStr,
                    // 添加动态的挑战人数
                    challengeNum: Math.max(1, item.challengeNum + Math.floor(Math.random() * 20) - 10),
                    accuracy: Math.min(100, Math.max(1, item.accuracy + Math.floor(Math.random() * 10) - 5))
                };
            });
        },

        // 辅助函数：打乱数组（Fisher-Yates洗牌算法）
        shuffleArray (array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        },

        // 换一批讲师
        changeTeachers () {
            this.displayedTeachers = this.getRandomTeachers();
        },

        // 初始化显示讲师数据
        initDisplayTeachers () {
            this.displayedTeachers = this.getRandomTeachers();
        },

        // 获取随机讲师数据
        getRandomTeachers () {
            return this.shuffleArray([...this.recommendedUsers]).slice(0, this.teacherCount);
        },
        
        // 预加载竞赛题库数据
        async preloadCompetitionExercises () {
            try {
                const params = {
                    type: 'competition',
                    currentPage: 1,
                    pageSize: 30,
                    sort: {
                        sortName: 'exercises_id',
                        sortType: 'ASC'
                    }
                };

                const result = await QuestionBankApi.getQuestionBankList(params);
                if (result.code === 200) {
                    this.competitionExercises = result.data.list;
                }
            } catch (error) {
                console.error('预加载竞赛题库数据失败', error);
            }
        },

        // 预加载课程题库数据
        async preloadCourseExercises () {
            try {
                const params = {
                    type: 'course',
                    currentPage: 1,
                    pageSize: 30,
                    sort: {
                        sortName: 'exercises_id',
                        sortType: 'ASC'
                    }
                };

                const result = await QuestionBankApi.getQuestionBankList(params);
                if (result.code === 200) {
                    this.courseExercises = result.data.list;
                }
            } catch (error) {
                console.error('预加载课程题库数据失败', error);
            }
        }
    },
    mounted () {
        // 组件挂载后加载热门课程数据
        this.loadHotCourses();
        // 加载题库精选数据
        this.loadExercises();
        // 初始化显示讲师数据
        this.initDisplayTeachers();

        // 初始化侧边栏随机题库数据
        this.initSidebarExercises();

        // 预加载竞赛题库数据
        setTimeout(() => {
            if (this.exercisesType === 'course') {
                this.preloadCompetitionExercises();
            } else {
                this.preloadCourseExercises();
            }
        }, 1000);
    },

};
</script>

<style scoped>
.home-view {
    width: var(--width);
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* 轮播图容器样式 */
.carousel-wrapper {
    width: 100%;
    margin-bottom: 30px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
}

/* 轮播图样式 */
.home-carousel {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.carousel-item {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 40px 30px 20px;
    color: white;
}

.carousel-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.main-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    position: relative;
}

.main-content {
    flex: 1;
    min-width: 0;
}

/* 移除原侧边栏样式 */
.sidebar {
    display: none;
}

/* 侧边栏内容容器 */
.sidebar-container {
    display: flex;
    flex-direction: column;
}

/* 本周热门侧边栏 */
.sidebar-weekly {
    margin-top: 14px;
}

/* 最近上传侧边栏 */
.sidebar-recent {
    margin-top: px;
}

/* 欢迎卡片容器 */
.welcome-card-container {
    margin-bottom: 45px;
}

/* 欢迎卡片调整样式 */
.welcome-card {
    position: relative;
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #2977C9, #5D9CEC);
    border-radius: 12px;
    color: white;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(41, 119, 201, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
}

.welcome-card-content {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
}

.welcome-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.welcome-text {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 20px;
    font-weight: 500;
    line-height: 1.5;
}

.welcome-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    opacity: 0.9;
}

.welcome-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 20px;
}

.welcome-stats i {
    font-size: 16px;
}

.welcome-decoration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
    overflow: hidden;
}

.welcome-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.welcome-circle-1 {
    width: 140px;
    height: 140px;
    right: -30px;
    top: -30px;
}

.welcome-circle-2 {
    width: 100px;
    height: 100px;
    right: 50px;
    top: 50%;
}

.welcome-circle-3 {
    width: 120px;
    height: 120px;
    right: 10px;
    bottom: -20px;
}

/* 使用与QuestionBankHomeView相似的盒子样式 */
.recommend-authors,
.featured-courses,
.featured-questions,
.sidebar-ad,
.sponsor-button,
.hot-list-section {
    width: 100%;
    border-radius: 10px;
    padding: 30px 25px;
    /* 增加上下内边距 */
    margin-bottom: 25px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sponsor-button {
    padding: 12px 15px;
    margin-bottom: 20px;
}

/* --- Section Header --- */
.section-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    /* 增加与内容的间距 */
    padding-bottom: 15px;
    /* 增加底部内边距 */
    border-bottom: 1px solid rgba(200, 200, 200, .5);
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.section-title-small {
    font-size: 18px;
    font-weight: 600;
    color: #444;
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-actions .el-button {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- 推荐作者 --- */
.author-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 10px;
}

.author-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 15px 5px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.author-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

.author-avatar {
    margin-bottom: 10px;
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.author-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

.author-desc {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
}

/* --- 课程精选 --- */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 20px;
}

.course-grid .courseCard {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-grid .courseCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.course-image-container {
    position: relative;
    width: 100%;
    padding-top: 66.66%;
    background-color: #f0f0f0;
}

.course-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    color: white;
    padding: 8px 10px;
    font-size: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.course-info {
    padding: 15px;
}

.course-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 38px;
}

.course-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
}

.course-teacher {
    font-weight: 500;
}

.course-update-time {
    font-size: 11px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 1fr 280px;
    }

    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .author-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .welcome-card {
        height: 260px;
    }
}

@media (max-width: 992px) {
    .main-layout {
        display: flex;
        flex-direction: column;
    }

    .welcome-card-container {
        margin-top: 20px;
    }

    .sidebar-weekly {
        margin-top: 20px;
    }

    .author-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .welcome-card {
        height: 220px;
    }
}

@media (max-width: 768px) {
    .home-view {
        padding: 15px;
    }

    /* 确保小屏幕上轮播图高度适当 */
    :deep(.el-carousel__container) {
        height: 300px !important;
    }

    .author-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .welcome-card {
        height: 200px;
        padding: 20px;
    }

    .welcome-title {
        font-size: 20px;
    }

    .welcome-text {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .welcome-button {
        padding: 10px 20px;
        font-size: 14px;
    }

    .welcome-decoration {
        display: none;
    }

    .carousel-title {
        font-size: 20px;
    }

    .carousel-overlay {
        padding: 30px 20px 15px;
    }
}

@media (max-width: 576px) {
    .home-view {
        padding: 10px;
    }

    /* 最小屏幕上进一步减小轮播图高度 */
    :deep(.el-carousel__container) {
        height: 200px !important;
    }

    .course-grid {
        grid-template-columns: 1fr;
    }

    .author-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-title {
        font-size: 18px;
    }

    .welcome-card {
        height: 200px;
    }
}

@media (max-width: 400px) {
    .author-grid {
        grid-template-columns: 1fr;
    }
}

/* 添加打印媒体查询，确保打印时内容完整 */
@media print {
    .home-view {
        margin-top: 0;
    }
}

/* 题库精选部分 */
.question-list-header {
    margin-bottom: 20px;
}

.question-tab-options {
    display: flex;
    gap: 10px;
}

.question-tab-option {
    padding: 8px 16px;
    background-color: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
}

.selected {
    background-color: #409EFF;
    color: white;
}

.question-list-content {
    margin-bottom: 20px;
}

.question-list-table {
    width: 100%;
    border-collapse: collapse;
}

.table-header {
    background-color: #f5f7fa;
    padding: 0;
    font-weight: 600;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 5px;
}

.table-column {
    padding: 8px 10px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.id-column {
    width: 80px;
    text-align: center;
}

.title-column {
    flex: 1;
    text-align: left;
    min-width: 180px;
}

.type-column {
    width: 90px;
    text-align: center;
}

.difficulty-column {
    width: 80px;
    text-align: center;
}

.accuracy-column {
    width: 80px;
    text-align: center;
}

.challenge-column {
    width: 100px;
    text-align: center;
}

.action-column {
    width: 100px;
    text-align: center;
}

.table-row {
    padding: 0;
    background-color: white;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    height: 70px;
}

.table-row:hover {
    background-color: #f5f7fa;
}

/* 侧边栏热门题库和最新题目样式 */
.hot-item-thumb {
    width: 100px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
}

.hot-item-type {
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hot-item-info {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hot-item-title {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-item-author {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-section {
    margin-bottom: 22px;
}

.sidebar-section:first-of-type {
    margin-top: 20px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
    position: relative;
    padding-left: 12px;
}

.sidebar-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    height: 16px;
    width: 4px;
    background: #2977C9;
    border-radius: 2px;
}

.sidebar-item {
    background: white;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.sidebar-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.exercise-info {
    width: 100%;
}

.exercise-title {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 8px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.exercise-meta {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.exercise-type {
    color: white;
    background-color: #409EFF;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    display: inline-block;
    min-width: 60px;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}

.exercise-difficulty {
    color: #F56C6C;
    margin-left: 8px;
}

.exercise-accuracy {
    color: #67C23A;
    margin-left: 8px;
}

.exercise-author {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
}

.exercise-author i {
    margin-right: 4px;
}

.course-card {
    display: none;
}

/* 设置baseUrl变量兼容问题 */
:deep(.courseCard .iconfont) {
    display: flex !important;
}

@media (max-width: 1200px) {
    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 992px) {
    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    }
}

@media (max-width: 768px) {
    .course-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 576px) {
    .course-grid {
        grid-template-columns: 1fr;
    }
}

.exercise-title {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 8px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.exercise-course {
    font-size: 12px;
    color: #888;
}

.exercise-type {
    background-color: #EFF6FF;
    color: #409EFF;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

.difficulty-tag {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.difficulty-easy {
    background-color: #67C23A;
    color: white;
}

.difficulty-medium {
    background-color: #E6A23C;
    color: white;
}

.difficulty-hard {
    background-color: #F56C6C;
    color: white;
}

.action-button {
    background-color: #409EFF;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s;
}

.action-button:hover {
    background-color: #66b1ff;
}

.question-type {
    background-color: #409EFF;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}
</style>
